<template>
  <div class="shop-box">
    <div class="shop-header">
      <div class="inner">
        <img
          src="../../assets/img/logo.png"
          alt=""
        >
        <el-popover
          placement="bottom"
          width="569"
          trigger="hover"
        >
          <el-row>
            <el-col :span="12">
              <div class="shop-show-l">
                <p class="shop-title">
                  店铺动态
                </p>
                <p class="shop-item">
                  精品数量：{{ totalCount }}件
                </p>
                <p class="shop-item">
                  最近成交：{{ VolumeData }}笔
                </p>
                <p class="shop-item">
                  好评率：100%
                </p>

                <p class="shop-title">
                  店铺服务
                </p>
                <p class="shop-item">
                  店铺主体：{{ cShopName }}
                </p>
                <p class="shop-item">
                  入驻时间：{{ dCreateDate }}
                </p>
                <p class="shop-item">
                  所在地：云南省昆明市
                </p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="shop-show-r">
                <div class="erwma">
                  <div
                    id="qrcode"
                    class="erwma-logo"
                  />

                  <!-- <img
			            src="../../assets/img/logo.png"
			            alt=""
			            class="erwma-logo"
			          > -->
                  扫一扫，手机逛起来
                </div>
                <el-button
                  size="mini"
                  class="goshop"
                  @click="Goto"
                >
                  进店
                </el-button>
                <el-button
                  v-if="!isCollect"
                  size="mini"
                  @click="CollectShop"
                >
                  收藏本店
                </el-button>
                <el-button
                  v-if="isCollect"
                  size="mini"
                  type="warning"
                  @click="CollectShop"
                >
                  取消收藏
                </el-button>
              </div>
            </el-col>
          </el-row>
          <el-button
            slot="reference"
            size="mini"
            round
            class="shop-type"
          >
            {{ iType === 1 ? "自营" : "非自营" }}
          </el-button>
        </el-popover>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav">
        <!-- <div
          class="menu-item"
          :class="activeIndex === '' ? 'active' : ''"
          @click="changeitem('index')"
        >
          首页
        </div> -->
        <div
          v-for="item in classify"
          :key="item.id"
          class="menu-item"
          :class="activeIndex === item.id ? 'active' : ''"
          @click="changeitem(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import QRCode from "qrcodejs2"; //引入方法
	export default {
		name: "Nav",
		data() {
			return {
				classify: [],
				activeIndex: "",
				totalCountOBJ: [],
				Shopid: "",
				shopsId: "", //店铺id
				iType: 0, // 0:自营 1:非自营
				totalCount: 0, // 商品数量
				dCreateDate: "", // 入驻时间
				pubuts: "", // 当前时间
				VolumeData: "", // 成交数量
				cShopName: "", // 店铺名称
				isCollect: false, //是否收藏
			};
		},
		watch: {
			$route: function() {
				this.indexPaht = this.$route.query.id;
			},
		},
		mounted() {
			this.Shopid = this.$route.query.id;
			this.getData(this.Shopid);
			this.GetShopsByConditionData(this.Shopid); // 店铺属于自营还是非自营
			this.GetProductListData(this.Shopid); // 查询某个店铺下商品总量前端展示
			this.GetShopByIdData(this.Shopid); // 店铺详情
			this.GetUrlQrCode(); // 获取店铺二维码
			if (localStorage.getItem("token")) {
				this.GetCollect(); // 获取收藏
			}
			console.log('sessionStorage.setItem("ShopActiveIndex", changeitem)', sessionStorage.getItem("ShopActiveIndex"))
			// 判断缓存是否有选择的nav，如果有则展示现有的tab，没有则返回首页
			if (sessionStorage.getItem("ShopActiveIndex") === null && sessionStorage.getItem("ShopActiveIndex") === '') {
				this.activeIndex = ''
				this.$emit("ChangeType", JSON.parse(sessionStorage.getItem("ShopActiveIndex")));
			} else {
				this.activeIndex = JSON.parse(sessionStorage.getItem("ShopActiveIndex")).id
				this.$emit("ChangeType", JSON.parse(sessionStorage.getItem("ShopActiveIndex")));
			}
		},
		methods: {
			getData(shop_id) {
				let params = {
					shop_id: shop_id,
				};
				this.$api.commit.ShopMenu(params).then((res) => {
					if (res.code == 1) {
						console.log("导航", res.data, res.data.slice(1));
						this.classify = res.data;
						this.changeitem(res.data[0])
					}
				});
			},
			// 导航切换
			changeitem(changeitem) {
				console.log("选择", changeitem, sessionStorage.getItem("ShopActiveIndex"), this.$route.path);
				if (this.$route.path !== '/searchpage') {
					if (changeitem === 'index') {
						changeitem = {
							id: '',
							name: '首页',
							shop_id: '',
							status: '',
							type: '',
							weigh: '',
						}
						this.activeIndex = changeitem.id;
						sessionStorage.setItem("ShopActiveIndex", JSON.stringify(changeitem));
						this.$emit("ChangeType", changeitem);
					} else {
						this.activeIndex = changeitem.id;
						sessionStorage.setItem("ShopActiveIndex", JSON.stringify(changeitem));
						this.$emit("ChangeType", changeitem);
						return false
					}
				} else {
					this.$router.push({
						path: "/shopindex?id=" + this.$route.query.id
					});
				}
			},
			// 店铺属于自营还是非自营
			GetShopsByConditionData(Shopid) {
				let params = {
					pageIndex: 1,
					pageSize: 12,
					shopName: "",
					iShopId: Shopid,
					token: localStorage.getItem("token"),
				};
				this.$api.commit.GetShopsByCondition(params).then((res) => {
					console.log("店铺属于自营还是非自营", res.data.data[0]);
					if (res.code === 200) {
						this.iType = res.data.data[0].iType;
					}
				});
			},
			// 店铺所属商品总数统计查询接口 /client/Products/getProductList
			GetProductListData(Shopid) {
				let params = {
					queryCondition: {
						order: [{
							fieldname: "iOrder",
							direction: "asc",
						}, ],
						pageindex: 1,
						pagesize: 1,
						where: [{
							fieldname: "categoryid",
							valuefrom: Shopid,
						}, ],
					},
				};
				this.$api.commit.GetProductList(params).then((res) => {
					console.log("店铺所属商品总数统计查询接口", res);
					if (res.code === 200) {
						this.totalCount = res.data.totalCount;
					}
				});
			},
			// 店铺详情
			GetShopByIdData(GetShopByIdData) {
				let params = {
					id: GetShopByIdData,
				};
				this.$api.commit.GetShopById(params).then((res) => {
					console.log("店铺详情", res.data);
					if (res.code === 200) {
						this.dCreateDate = res.data.dCreateDate;
						this.pubuts = res.data.pubuts.substring(0, 10);
						this.cShopName = res.data.cShopName;
						this.GetShopOrderVolumeData(
							GetShopByIdData,
							this.dCreateDate,
							this.pubuts
						);
					}
				});
			},
			// 店铺成交订单总数统计查询接口
			GetShopOrderVolumeData(GetShopOrderVolumeData, startdate, enddate) {
				let params = {
					startdate: startdate,
					enddate: enddate,
					status: "ENDORDER",
					iShopId: GetShopOrderVolumeData,
				};
				this.$api.commit.GetShopOrderVolume(params).then((res) => {
					console.log("店铺成交订单总数统计查询接口", res);
					if (res.code === 200) {
						this.VolumeData = res.data;
					}
				});
			},
			// 生成二维码
			GetUrlQrCode() {
				console.log("生成二维码，当前路由", location.hash.substring(1));
				let SaoMaUrl = `http://youyou.tangmu.xin/#/pages/inner${location.hash.substring(
        1
      )}`;
				let qrcode = new QRCode(document.getElementById("qrcode"), {
					width: 170,
					height: 170,
					colorDark: "#000000",
					colorLight: "#ffffff",
					correctLevel: QRCode.CorrectLevel.H,
				});
				qrcode.makeCode(SaoMaUrl);
			},
			// 收藏本店
			CollectShop() {
				console.log("收藏本店", this.Shopid);
				let params = {
					token: localStorage.getItem("token"),
					ids: [this.Shopid],
				};
				if (this.isCollect) {
					params.ids = [this.shopsId];
					this.$api.commit.delFavorites(params).then((res) => {
						console.log("取消收藏", res);
						if (res.code === 200) {
							// this.VolumeData = res.data
							this.isCollect = false;
							this.$message.success(res.message);
						} else {
							this.$message.error(res.message);
						}
					});
				} else {
					this.$api.commit.GetAddShopFavorite(params).then((res) => {
						console.log("收藏店铺", res);
						if (res.code === 200) {
							// this.VolumeData = res.data
							this.isCollect = true;
							this.$message.success(res.message);
						} else {
							this.$message.error(res.message);
						}
					});
				}
			},
			// 进店
			Goto() {
				console.log("进店");
				this.$router.go(0);
			},
			// 点击logo回首页
			GoToIndex() {
				this.$router.push({
					path: "/",
				})
			},
			GetCollect() {
				let params = {
					token: localStorage.getItem("token"),
					shop_id: this.Shopid,
				};
				this.$api.commit.GetShopFavorites(params).then((res) => {
					console.log("关注人数res", res);
					if (res.code === 200) {
						console.log("this.关注人数", res.data.pager.totalCount);
						// this.totalCount = res.data
						if (res.data.pager.totalCount > 0) {
							res.data.pager.data.forEach((item) => {
								if (item.shopid == this.Shopid) {
									this.isCollect = true;
									this.shopsId = item.id;
								}
							});
						}
					}
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.shop-box {

		background: #fff;
		opacity: 0.95;
		position: fixed;
		z-index: 4;
		top: 3.6rem;
		width: 100%;
	}

	.shop-header {
		display: flex;
		height: 6.75rem;
		// background: #e8e9e9;
		align-items: center;
		justify-content: center;
		padding: 0 10rem;

		// .logo{
		//   cursor: pointer;
		// }
		.inner {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #c0c0c0;
		}

		.shop-type {
			margin: 0 1rem;
			// background: #e8e9e9;

			border: 1px solid black;
		}

		.shop-type:hover {
			color: black;
		}

		.shop-type:focus {
			color: black;
		}
	}

	.nav-box {
		height: 3.75rem;
		// background: #e8e9e9;

		.nav {
			width: 50%;
			height: 3.75rem;
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			text-align: center;
		}

		.menu-item {
			cursor: pointer;
			font-size: 0.88rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #242424;
			padding: 0.44rem 0;

			&.active {
				color: #08c19d;
				border-bottom: 1px solid #08c19d;
			}

			&:hover {
				color: #08c19d;
			}
		}
	}

	.shop-show-l {
		display: flex;
		justify-content: center;
		flex-direction: column;

		.shop-title {
			height: 2.5rem;
			display: flex;
			align-items: center;
			font-size: 1rem;
			font-weight: bold;
		}

		.shop-item {
			height: 1.5rem;
			display: flex;
			align-items: center;
			font-size: 0.88rem;
		}
	}

	.shop-show-r {
		display: block;
		margin: 0 auto;
		text-align: center;
		width: 55%;

		.erwma-logo {
			background: red;
			display: flex;
			height: 10.13rem;
			width: 10.13rem;
		}

		.goshop {
			margin: 10px 0;
			background: black !important;
			color: #ffffff;
		}
	}
</style>
